
const vss_s = `
  // 声明 attribute 变量，此变量必须是全局的
  attribute vec4 a_Position;
  // 声明 uniform 变量，用于接收平移量
  uniform vec4 u_Translation;
  // 定义定点着色器的main函数
  void main() {
    // 为 定点着色器的属性 gl_Position 赋值
    gl_Position = a_Position + u_Translation;
  }
`;

const fs_s = `
  // 定义 片元着色器 的 main 函数
  void main() {
    // 为 片元着色器 的 唯一属性 gl_FragColor 赋值
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`

function main() {

  const canvas = document.getElementById('webgl');

  if (!canvas) {
    alert('Field for got canvas by id');
    return false;
  }
  const gl = canvas.getContext('webgl');
  if (!gl) {
    alert('Field for got webgl');
    return false;
  }
  if (!initShaders(gl, vss_s, fs_s)) {
    alert('Field for init shaders');
    return false;
  }
  const pointCount = initVertexPoints(gl);
  if (pointCount < 0) {
    alert('Field to init vertex points.');
    return false;
  }

  const u_Translation = gl.getUniformLocation( gl.program,'u_Translation');
  if (!u_Translation) {
    alert('Field to get translation');
    return false;
  }
  gl.uniform4f(u_Translation, 0.4, 0.4, 0.0, 0.0);

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.drawArrays(gl.TRIANGLE_FAN, 0, pointCount);
}

/**
 * 设置着色器定点信息
 * */
function initVertexPoints(gl) {
  // 定义 vertices
  const vertices = new Float32Array([
    0.0, 0.5,
    0.5, 0.0,
    0.0, -0.5,
    -0.5, 0.0,
  ]);

  // 创建缓存区
  const vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    alert('Field to create buffer.');
    return -1;
  }
  // 绑定缓存区到目标
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // 写入数据到缓存区
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  // 获取 attribute 变量
  const a_position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_position < 0) {
    alert('Field to get attribute.');
    return -1;
  }
  // 定义每个定点分配量的个数
  const size = 2;
  // 分配缓存区数据到 attribute
  gl.vertexAttribPointer(a_position, size, gl.FLOAT, false, 0, 0);
  // 激活缓存区
  gl.enableVertexAttribArray(a_position);
  return Math.ceil(vertices.length / size);
}